<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WORK</title>

    <!-- 动画库 -->

    <link rel="stylesheet" href="css/animate.min.css">

    <!-- bootstrap核心css -->

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 重置样式 -->

    <!-- <link rel="stylesheet" href="css/reset.less"> -->

    <link rel="stylesheet" href="css/work.css">

</head>

<body>
    <div class="content">

        <!-- left -->

        <div class="left">
            <div class="header">
                <img src="./images/kappe.png" alt="" class="pic-one">
                <img src="./images/forcreatives.png" alt="" class="pic-two">
            </div>

            <ul class="nav">
                <a href="index.html">
                    <li class="Home">Home</li>
                </a>
                <a href="work.html">
                    <li class="Work">Work</li>
                </a>
                <a href="about.html">
                    <li class="About">About</li>
                </a>
                <a href="blog.html">
                    <li class="Blog">Blog</li>
                </a>
                <a href="#">
                    <li class="Services">Services</li>
                </a>
                <a href="contact.html">
                    <li class="Contact">Contact</li>
                </a>
            </ul>

            <div class="Filter">
                <p>Filter<span class="glyphicon glyphicon-th-large Filter-right"></span></p>
                <ul class="nav-bottom">
                    <a href="#" class="firt-a">
                        <li>All Works</li>
                    </a>
                    <a href="#">
                        <li>web design</li>
                    </a>
                    <a href="#">
                        <li>illustration</li>
                    </a>
                    <a href="#">
                        <li>photography</li>
                    </a>
                    <a href="#">
                        <li>wallpapers</li>
                    </a>
                    <a href="#">
                        <li>brochures</li>
                    </a>

                </ul>
            </div>

            <div class="left-bottom">
                <div class="share">
                    <img src="./images/webicon-flickr.png" alt="">
                    <img src="./images/webicon-googleplus.png" alt="">
                    <img src="./images/webicon-twitter.png" alt="">
                    <img src="./images/webicon-pinterest.png" alt="">
                    <img src="./images/webicon-dribbble.png" alt="">
                    <img src="./images/webicon-behance.png" alt="">
                    <img src="./images/webicon-facebook.png" alt="">
                </div>

                <div class="text">© 2014 Kappe, All Rights Reserved</div>

            </div>

        </div>

        <!-- right -->

        <div class="right">

            <!-- right-left -->

            <div class="right-left">
                <div class="pic">
                    <img src="./images02/Layer72.png" alt="">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <h3>Heavy Sand - Creative Photography</h3>
                <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh
                    idelit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum
                    velit.Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
                    auctor euin elit. Class aptent taciti sociosqu ad litora This is Photoshop's version of Lorem Ipsum.
                    Proingravida nibh vel velit auctor aliquet.</p>
                <p>
                    Duis sed odio sit amet nibh vulputate cursus a sit amet
                    mauris. Morbi accumsan ipsum velit. Nam nectellus a odio tincidunt auctor a ornare odio.
                </p>
                <hr>
                <h3>Related Projects</h3>
                <div class="threePic">
                    <img src="./images02/Layer87.png" alt="" class="col-lg-4">
                    <img src="./images02/Layer86.png" alt="" class="col-lg-4">
                    <img src="./images02/Layer87.png" alt="" class="col-lg-4">
                </div>
            </div>

            <!-- right-right -->

            <div class="right-right">

                <h3 class="right-one">Project Info</h3>

                <div class="form">
                    <div class="form-one">
                        <div></div>
                        <p>premiumlayers</p>
                    </div>
                </div>
                <div class="form">
                    <div class="form-one">
                        <div class="xin"></div>
                        <p>138 Likes</p>
                    </div>
                </div>
                <div class="form">
                    <div class="form-one">
                        <div class="data"></div>
                        <p>25 December, 2013</p>
                    </div>
                </div>
                <div class="form">
                    <div class="form-one">
                        <div class="a"></div>
                        <p>4 Comments</p>
                    </div>
                </div>

                <h3>Tags</h3>

                <ul class="tags">
                    <li>
                        <p>web design</p>
                    </li>
                    <li>
                        <p>photography</p>
                    </li>
                    <li>
                        <p>development</p>
                    </li>
                    <li>
                        <p>php</p>
                    </li>
                    <li>
                        <p>ecommerce</p>
                    </li>
                    <li>
                        <p>graphic</p>
                    </li>
                </ul>

                <h3>Project Gallery</h3>

                <div class="items">
                    <div><img src="./images02/Layer73.png" alt=""></div>
                    <div><img src="./images02/Layer73.png" alt=""></div>
                    <div><img src="./images02/Layer73.png" alt=""></div>
                    <div><img src="./images02/Layer73.png" alt=""></div>
                    <div><img src="./images02/Layer73.png" alt=""></div>
                    <div><img src="./images02/Layer73.png" alt=""></div>
                    <div><img src="./images02/Layer73.png" alt=""></div>
                    <div><img src="./images02/Layer73.png" alt=""></div>
                    <div><img src="./images02/Layer73.png" alt=""></div>
                    <div><img src="./images02/Layer73.png" alt=""></div>
                    <div><img src="./images02/Layer73.png" alt=""></div>
                </div>

                <h3>Project Features</h3>

                <div class="p">
                    <p><span class="glyphicon glyphicon-ok"></span>Responsive Layout</p>
                    <p><span class="glyphicon glyphicon-ok"></span>Font Awesome Icons</p>
                    <p><span class="glyphicon glyphicon-ok"></span>Clean & Commented Code</p>
                    <p><span class="glyphicon glyphicon-ok"></span>Pixel perfect Design</p>
                    <p><span class="glyphicon glyphicon-ok"></span>Highly Customizable</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

<!-- jq库 -->

<script src="js/jquery-3.5.1.min.js"></script>

<!-- bootstrap核心js -->

<script src="js/bootstrap.min.js"></script>